<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-05-21 09:54:00
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-06-27 15:42:59
 * @FilePath: \hn-fire-product-mobile\src\pages\home\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { useUserStore } from '@/stores/user';
import SafetyEdu from './safetyEdu.vue';
import ExamScores from './examScores.vue';
import Certificate from './certificate.vue';
import { whManagerBsTbRiskHazardsSpecialGetPageUsingPost } from '@/genapi/wh';
defineOptions({ name: 'Company' });

const router = useRouter();

const userStore = useUserStore();

const tabValue = ref('1');

const articleList = ref([
	// {
	// 	title: '作业1',
	// 	time: '20240年2月2日 08:00~09:00',
	// 	status: '1',
	// },
	// {
	// 	title: '作业2',
	// 	time: '20240年2月2日 08:00~09:00',
	// 	status: '2',
	// },
	// {
	// 	title: '作业3',
	// 	time: '20240年2月2日 08:00~09:00',
	// 	status: '2',
	// },
	// {
	// 	title: '作业4',
	// 	time: '20240年2月2日 08:00~09:00',
	// 	status: '3',
	// },
	// {
	// 	title: '作业5',
	// 	time: '20240年2月2日 08:00~09:00',
	// 	status: '1',
	// },
	// {
	// 	title: '作业6',
	// 	time: '20240年2月2日 08:00~09:00',
	// 	status: '3',
	// },
	// {
	// 	title: '作业7',
	// 	time: '20240年2月2日 08:00~09:00',
	// 	status: '3',
	// },
]);
const specialOperateClick = (id) => {
  console.log(id)
  userStore.specialOperateId = id
  router.replace('/home/specialOperateReport')
}

onMounted(async () => {
  let res = await whManagerBsTbRiskHazardsSpecialGetPageUsingPost({
  current: 1,
  query: {
    enterpriseId: '1',
    id: userStore.articleId
  },
  size: 1000
})
for(let i = 0; i<res.data?.records?.length; i++){
  articleList.value.push(res.data?.records[i])
}
  // console.log(articleList.value)
})
</script>

<template>
	<div class="company">
		<div class="titleContent">
			<span>特殊作业报备</span>
			<nut-button type="info" size="mini" shape="square" @click="router.replace({ path: '/home/createTask' })"
				>新增</nut-button
			>
		</div>

		<div class="TaskListContent">
			<div class="articleItem" v-for="(item, i) in articleList" :key="i" @click="specialOperateClick(item.id)">
				<div class="articleDetails">
					<div class="articleLabel">
						特殊作业 |
						<span class="articleTitle">{{ item.taskName }}</span>
					</div>
					<span class="timeStamp">实施时间：{{ item.handleTime }}</span>
				</div>
				<img class="taskStatus" v-if="item.taskStatus === '1'" src="../assets/received.png" />
				<img class="taskStatus" v-if="item.taskStatus === '2'" src="../assets/worked.png" />
				<img class="taskStatus" v-if="item.taskStatus === '3'" src="../assets/working.png" />
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.company {
	height: 100%;
	width: 100%;
	padding: 0px 20px;
	.titleContent {
		width: 100%;
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
	}
	.TaskListContent {
		padding-top: 20px;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		.articleItem {
			width: 100%;
			height: 70px;
			display: flex;
			justify-content: space-between;
			background-color: #f9fafd;
			padding: 10px 10px;
			font-size: 14px;
			.articleDetails {
				width: 80%;
			}
			.articleLabel {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				display: block;
				text-wrap: nowrap;
				color: #4691d6;
				font-weight: 600;
				span {
					color: #000;
					font-weight: 300;
				}
			}
			.timeStamp {
				font-size: 11px;
				font-weight: 600;
				color: #9699a1;
			}
			.taskStatus {
				width: 40px;
				height: 19px;
			}
		}
	}
}
</style>
